<template>
	<view class="room-setting">
		<!-- 基础表单校验 -->
		<view class="form-box">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label-width="200rpx" label="包间名称" required name="productName">
					<uni-easyinput v-model="valiFormData.productName" primaryColor="#ffd589" placeholder="请输入包间名称" />
				</uni-forms-item>
				<uni-forms-item label-width="200rpx" label="包间类型" required name="rang">
					<view v-if="productionModel.length">
						<radio-group @change="typeChange">
							<view class="type-box">
								<view v-for="(item,index) in productionModel" :key="index" class="type-item">
									<radio :value="item.modelType" color="#ff9600" :checked="valiFormData.productType === item.modelType" />
									<span>{{item.modelName}}</span>
								</view>
							</view>
						</radio-group>
					</view>
				</uni-forms-item>
				<uni-forms-item label-width="200rpx" label="排序" required name="productSort">
					<uni-easyinput v-model="valiFormData.productSort" primaryColor="#ffd589" placeholder="请输入排序数字" />
				</uni-forms-item>
				<uni-forms-item label-width="200rpx" label="标签" required>
					<view class="flex-sb">
						<view class="tag-box">
							<view class="tag" v-for="(item,index) in tagArr" :key="index">{{item}} <uni-icons
									@click="deleteTag(index)" style="margin-left: 20rpx;" type="trash" color="red"
									size="16"></uni-icons> </view>
						</view>
						<view @click="addTag" class="add-tag">+添加</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label-width="200rpx" label="状态" required name="status">
					<radio-group @change="stateChange">
						<view class="type-box">
							<view class="type-item">
								<radio value="0" color="#ff9600" :checked="valiFormData.status === '0'" />
								<span>启用</span>
							</view>
							<view class="type-item">
								<radio value="1" color="#ff9600" :checked="valiFormData.status === '1'" />
								<span>禁用</span>
							</view>
						</view>
					</radio-group>
				</uni-forms-item>
			</uni-forms>
			<view class="img-box">
				<view class="img-title">包间图片</view>
				<uni-file-picker :limit="1" :auto-upload="false" @select="selectstoreImg" @delete="deletestoreImg"
					v-model="storeImg" fileMediatype="image" mode="grid" file-extname="png,jpg,jpeg"></uni-file-picker>
			</view>
		</view>
		<view class="footer-box">
			<button type="default" v-if="valiFormData.productId" class="delete-btn" @click="deleteEvent">删除</button>
			<button type="default" class="submit-btn" @click="submit('valiForm')">确认</button>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog v-if="showPop" mode="input" title="请输入标签名" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				productionModel:[],
				valiFormData: {
					productId: '',
					productName: '',
					productSort: '',
					productType: '1',
					status: '0',
					productTags: [],
					productImages: []
				},
				rules: {
					productName: {
						rules: [{
							required: true,
							errorMessage: '包间名称不能为空'
						}]
					},
					productSort: {
						rules: [{
							required: true,
							errorMessage: '排序不能为空'
						}, {
							format: 'number',
							errorMessage: '排序只能输入数字'
						}]
					}
				},
				tagArr: [],
				showPop: false,
				storeImg: [],
				shopId: ''
			}
		},
		methods: {
			// 选择包间类型
			typeChange(e) {
				this.valiFormData.productType = e.detail.value
			},
			// 选择包间状态
			stateChange(e) {
				this.valiFormData.status = e.detail.value
			},
			// 添加标签
			addTag() {
				this.showPop = true
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				if (val !== '' && val !== null && val !== undefined) {
					this.tagArr.push(val)
					// 关闭窗口后，恢复默认内容
					this.showPop = false
				}
			},
			// 删除标签
			deleteTag(index) {
				this.tagArr.splice(index, 1)
			},
			// 选择文件后触发
			selectstoreImg(data) {
				this.sentPicture(data.tempFilePaths[0])
			},
			// 文件上传
			sentPicture(path) {
				let requestBaseUrl = sessionStorage.getItem('requestBaseUrl')
				let uploadurl = `${requestBaseUrl}/resource/app/oss/upload`
				uni.uploadFile({
					url: uploadurl,
					filePath: path,
					name: 'file',
					formData: {},
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('token'),
						'clientId': uni.getStorageSync('clientId')
					},
					success: (res) => {
						let resData = JSON.parse(res.data)
						let obj = {
							url: resData.data.url,
							temPath: path
						}
						this.storeImg.push(obj)
					}
				});
			},
			// 删除照片
			deletestoreImg(e) {
				this.storeImg.forEach((item, index) => {
					if (item.temPath === e.tempFilePath) {
						this.storeImg.splice(index, 1)
					}
				})
			},
			// 删除包间
			deleteEvent(){
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'DELETE',
								url: `/applet/store/product/${this.valiFormData.productId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '删除成功',
										duration: 1000
									})
									setTimeout(() => {
										const eventChannel = this.getOpenerEventChannel()
										eventChannel.emit('reload')
										uni.navigateBack()
									}, 1000)
								} else if (res.code === 500) {
									uni.showToast({
										title: res.msg,
										duration: 2000,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.valiFormData.productTags = this.tagArr;
					this.valiFormData.productImages = []
					this.storeImg.forEach((item) => {
						this.valiFormData.productImages.push(item.url)
					})
					const data = this.valiFormData
					let type = ''
					if (data.productId) {
						type = 'PUT'
					} else {
						data.shopId = this.shopId
						type = 'POST'
					}
					this.$request({
						method: type,
						url: `/applet/store/product`,
						data,
						loading: true,
						isEncrypt: false
					}).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '保存成功',
								duration: 2000
							})
							setTimeout(() => {
								const eventChannel = this.getOpenerEventChannel()
								eventChannel.emit('reload', {
									productType: this.valiFormData.productType
								})
								uni.navigateBack()
							}, 2000)
						} else if (res.code === 500) {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon: 'none'
							})
						}
					}).catch(err => {
						console.log('查询异常：', err)
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 请求产品详情
			requestEvent() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/${this.valiFormData.productId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					const {
						productImages
					} = res.data
					this.valiFormData = res.data;
					this.tagArr = res.data.productTags;
					productImages.forEach((item) => {
						const obj = {
							url: item
						}
						this.storeImg.push(obj)
					})
				}).catch(err => {
					console.log('查询异常：', err)
				})
			},
			// 获取产品类型
			getProductionModel(){
				this.$request({
					method: 'get',
					url: `/applet/store/product/modelList`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.productionModel = res.data || []
				}).catch(err => {
					console.log('查询异常：', err)
				})
			}
		},
		onLoad(option) {
			this.getProductionModel()
			this.valiFormData.productId = option.productId || ''
			this.shopId = option.shopId || ''
			if (this.valiFormData.productId) {
				this.requestEvent()
			}
		}
	}
</script>

<style scoped lang="scss">
	.room-setting {
		background: #FFF;
		padding-bottom: 152rpx;

		.form-box {
			padding: 30rpx;
		}


		.flex-sb {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.type-box {
			display: flex;
			flex-wrap: wrap;
		}

		.type-item {
			margin-left: 20px;
		}

		.tag-box {
			flex: 1;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.tag {
				color: #ff9600;
				background: #ffe7c4;
				padding: 16rpx;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
				margin-right: 10rpx;
			}
		}

		.add-tag {
			background: #ff9600;
			color: #FFF;
			flex: 0 0 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			border-radius: 10rpx;
			padding: 16rpx 0;
		}

		.footer-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background: #FFF;
			display: flex;
		}

		.submit-btn {
			color: #FFF;
			background: #ff9600;
			flex: 1;
		}

		.delete-btn {
			flex: 1;
			margin-right: 20rpx;
		}

		.img-title {
			position: relative;
			color: #606266;
			margin-bottom: 20rpx;
			font-size: 28rpx;
		}

		.img-title::before {
			content: '*';
			position: absolute;
			top: 0;
			left: -14rpx;
			color: red;
		}
	}
</style>